<template>
	<div class="foot">
		<div class="foot-top">
			<p><span>票面价</span>是指通过景区指定窗口售卖的纸质门票上标注的价格</p>
		</div>
		<div class="foot-content">
			<ul>
				<li>机票</li>
				<li>酒店</li>
				<li>公寓</li>
				<li>团购</li>
				<li>火车票</li>
				<li>景点</li>
				<li>接送机</li>
				<li>度假</li>
				<li>攻略</li>
				<li>旅途</li>
				<li>车车</li>
				<li>当地人</li>
				<li class="more" @click="showmore">更多</li>
			</ul>
			<ol>
				<li>登录</li>
				<li>我的订单</li>
				<li>最近浏览</li>
				<li>关于我们</li>
			</ol>
		</div>
		<div class="foot-bottom">
			<ul>
				<li>触屏版</li>
				<li>电脑版</li>
			</ul>
			<p>Qunar 京ICP备05021087<span>意见反馈</span></p>
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				n:0,
				more:"更多",
				nomore:"收起"
			}
		},
		methods:{
			showmore(){
				let more = document.querySelector(".more")
				let morelist = document.querySelector(".foot-content").querySelector("ul").getElementsByTagName("li")
				// if(more.innerHTML===this.nomore){
				// 	console.log(more)
				// 	more.innerHTML=this.nomore
				// }
				if(!this.n){
					for(var i = 0;i < morelist.length;i++){
						morelist[i].className = "moreshow"
					}
					// more.innerHTML="收起"
					this.n = 1
				}else{
					for(var i = 3;i < morelist.length-1;i++){
						morelist[i].className = ""
					}
					this.n = 0
				}
			}
		}
	}
</script>
<style>
	/*.more{
		position: absolute;
		right: .2rem;
		bottom:0;
	}*/
	.foot-content .moreshow{
		display: block;
	}
	.foot-top{
	    font-size: .24rem;
    	line-height: .36rem;
    	background-color: #fff;
    	padding-left: .3rem;
	}
	.foot-content ul li:last-child{
		float:right;
	}
	.foot-content ul{
		overflow: hidden;
		margin: 0 auto;
   		padding: 10px 10px 0 10px;
   		width: 6rem;
   		position: relative;
	}
	.foot-content ol{
		overflow: hidden;
		border-bottom: 1px solid #cacaca;
	}
	.foot-content ul li{
		float: left;
		font-size: 12px;
		color: #9e9e9e;
		width: 25%;
		text-align: center;
		line-height: .6rem;
	}
	.foot-content ul li+li+li+li{
		display: none;
	}
	.foot-content .more{
		display: block;
	}
	.foot-content ol li{
		float: left;
		padding-left: 20px;
		color: #25a4bb;
	    font-size: 14px;
	    line-height: 39px;
	}
	.foot-bottom{
		text-align: center;
		line-height: 35px;
	}
	.foot-bottom p{
		color: #9e9e9e;
	    font-size: 14px;
	}
	.foot-bottom p span{
		color: #9e9e9e;
	    font-size: 14px;
	}
	.foot-bottom ul{
		width: 100%;
		padding: 10px 0 0 0;
    	text-align: center;
    	line-height: .3rem;	
	}
	.foot-bottom li{
		font-size: 14px;
		display: inline-block;
    	margin: 0 15px;
	}
</style>